<template>
  <div class="index">
    <el-row type="flex" justify="center">
      <el-col :span="3">
        <el-image
          style="height: 70%"
          :src="require('@/assets/imgs/logo-blur.png')"
          fit="contain"
        />
      </el-col>
      <el-col :span="18" style="margin-right:10px;">
        <el-input v-model="listQuery.name" class="searchClass" placeholder="请输入内容" />
      </el-col>
      <el-col :span="3">
        <el-button type="primary" style="width:80%" icon="el-icon-search" @click="initList">搜索</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="line-height: 20px;">
        <el-card class="box-card" style="padding-bottom: 10px;">
          <el-row>
            <el-col class="conLabel" :span="2">已选条件</el-col>
            <el-col :span="20">
              <el-tag
                v-for="tag in listQuery.tags"
                :key="tag.name"
                class="conA"
                size="mini"
                closable
                @close="handleClose(tag)"
              >
                {{ tag.name }}
              </el-tag>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="conLabel" :span="2">申请类别</el-col>
            <el-col :span="22">
              <fold-panel>
                <slot>
                  <el-link v-for="(item, index) in sbList" class="conA" :underline="false" @click="inputCon('type_'+item.id, item.name)">{{ item.name }}</el-link>
                </slot>
              </fold-panel>
            </el-col>
          </el-row>
          <el-col class="conLabel" :span="2" style="">
            法律状态
          </el-col>
          <el-col :span="22">
            <fold-panel>
              <slot>
                <el-link v-for="(item, index) in StatusTrademark" class="conA" :underline="false" @click="inputCon('status_'+index, item)">{{ item }}</el-link>
              </slot>
            </fold-panel>
          </el-col>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-loading="list == undefined" :gutter="20" style="margin-top:40px; border:1px #ccc solid;padding: 20px;" element-loading-text="正在查询中。。。">
      <el-col v-for="item in list" :span="4" style="margin-bottom: 20px;">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="item.picUrl" class="image" style="border-bottom: 1px #ccc solid;width: 100%;">
          <div style="padding: 14px;">
            <span class="text-inline">{{ sbGetTypeById(item.categoryId) }}</span>
            <span class="text-inline">{{ item.name }}</span>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="$router.push('/theme0/goodView?id='+item.id)">购买</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="initList" />
  </div>
</template>

<script>
import { listSb } from '@/api/mall/category'
import { heList } from '@/api/mall/goods'
import StatusTrademark from '../../ConstData/StatusTrademark'
import FoldPanel from '@/components/FoldPanel'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'SearchIndex',
  components: {
    FoldPanel, Pagination
  },
  props: ['searchName'],
  data() {
    return {
      StatusTrademark: StatusTrademark,
      sbList: undefined,
      list: undefined,
      total: 0,
      listQuery: {
        tags: [],
        page: 1,
        limit: 20,
        goodsSn: undefined,
        name: undefined,
        sort: 'add_time',
        order: 'desc'
      }
    }
  },
  computed: {
    sbGetTypeById() {
      return function(id) {
        const sbType = this.sbList.filter(sb => sb.id == id)[0]
        return sbType ? sbType.name : ''
      }
    }
  },
  mounted() {
    this.listQuery.name = this.$route.query.searchName
    listSb().then(res => {
      this.sbList = res.data.data.records
    })
    this.initList()
  },
  methods: {
    handleClose(tag) {
      this.listQuery.tags.splice(this.listQuery.tags.indexOf(tag), 1)
    },
    initList() {
      this.list = undefined
      const params = { ...this.listQuery }
      params.tags = encodeURI(JSON.stringify(params.tags))
      heList(params).then(response => {
        this.list = response.data.data.records
        this.total = response.data.data.total
      }).catch(() => {
        this.list = []
        this.total = 0
      })
    },
    inputCon(key, name) {
      this.listQuery.tags.push({ name: name, key, key })
    }
  }
}
</script>

<style scoped>
.index {
  padding: 20px;
  width: 70%;
  margin: 0 auto;
}
.conLabel{
  font-size: 12px;
  color: #666666;
  line-height: 23px;
}
.conA {
  margin-right: 10px;
  font-size: 13px;
}

</style>
<style>
.searchClass input{
  border-color: #46a6ff;
}
.pane {
  line-height: 15px;
  height: 15px;
  overflow:hidden;
}
.paneActive {
  height: auto;
}
</style>
